<template>
	<uni-card>
	<uni-forms  ref="formRef" :modelValue="userData">
		<view class="texts">
			<text class="card-text">姓名</text>
			<text class="star">*</text>
			<text class="card-text">：</text>
		</view>
		<uni-forms-item name="name">
			<input @input="sendCardInfo" class="input" v-model="userData.name" placeholder="请输入预约人姓名" 
				placeholder-style="
				font-weight: 400;
				font-size: 15px;
				color: #686868;
			"/>
		</uni-forms-item>
		<view class="texts">
			<text class="card-text">证件类型</text>
			<text class="star">*</text>
			<text class="card-text">：</text>
		</view>
		<uni-forms-item name="type">
			<view>
				<uni-combox @input="sendCardInfo" :candidates="candidates" placeholder="请选择证件类型" v-model="userData.type"></uni-combox>
			</view>
		</uni-forms-item>
		<view class="texts">
			<text class="card-text">证件号码</text>
			<text class="star">*</text>
			<text class="card-text">：</text>
		</view>
		<uni-forms-item name="number">
			<input @input="sendCardInfo" class="input" focus placeholder="请输入证件号码" v-model="userData.number"
			placeholder-style="
				font-weight: 400;
				font-size: 15px;
				color: #686868;
			"/>
		</uni-forms-item>
		<view class="texts">
			<text class="card-text">手机号码</text>
			<text class="star">*</text>
			<text class="card-text">：</text>
		</view>
		<uni-forms-item name="tel">
			<input @input="sendCardInfo" class="input" focus placeholder="请输入手机号码" v-model="userData.tel"
			placeholder-style="
				font-weight: 400;
				font-size: 15px;
				color: #686868;
			"/>
		</uni-forms-item>
	</uni-forms>
	</uni-card>
</template>

<script setup>
	import {ref} from 'vue';
	import { reactive } from 'vue';
	
	let candidates = ref(['中国居民身份证', '其他']);
	
	let userData = ref({name: '',type: '',number: '',tel: ''})
	
	let emit = defineEmits(['getCardInfo']);
	let sendCardInfo = function(){
		console.log(userData.value.name);
		emit('getCardInfo', userData);
	}
</script>

<style>
	.texts{
		margin-bottom: 6px;
	}
	.input{
		height: 40px;
		background: #F3F5F9;
		border-radius: 6px;
		padding-left: 14px;
		color: #000000;
	}
	.star{
		font-size: 15px;
		font-weight: 400;
		color: #e8240f;
		line-height: 0;
	}
	.card-text{
		color: #05261b;
		font-size: 15px;
		font-weight: 400;
		line-height: 0;
		letter-spacing: 0;
		paragraph-spacing: 0;
		text-align: left;
	}
	
</style>